<template>
  <k-view :class="['page-tabs', isRank ? 'tabs-bg-image' : '']">
    <k-view class="decoration" v-if="isRank"></k-view>
    <k-view
      class="tab-item"
      v-for="tab in tabList"
      v-show="tab.show"
      :key="tab.id"
      @click="changeTab(tab)"
    >
      <k-view class="tab-item-inner">
        <k-text
          :class="[
            'tab-item-text',
            modelValue + '' === tab.index + '' ? 'active' : '',
            modelValue + '' === tab.index + '' ? 'theme-text-title' : 'theme-text-content',
          ]"
          >{{ tab.name }}</k-text
        >
        <k-view v-show="modelValue + '' === tab.index + ''" :class="['tab-item-slider']"></k-view>
      </k-view>
    </k-view>
  </k-view>
</template>

<script>
export default {
  props: {
    isRank: {
      type: [Number, Boolean],
      default: false,
    },
    // 选中的tab的index
    modelValue: {
      type: Number,
      default: 1,
    },
    tabList: {
      type: Array,
      default: [],
    },
    authType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      bgColor: '',
      textColor: '',
    };
  },
  methods: {
    changeTab(tab) {
      this.$emit('change', tab.index);
    },
  },
  watch: {
    authType: {
      handler(nVal) {
        [this.bgColor, this.textColor] = nVal === 2 ? ['', '#262626'] : ['#ff2436', '#ffffff'];
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less">
.page-tabs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 20px 10px;
  box-sizing: border-box;
  background-color: v-bind(bgColor);
  position: relative;
  z-index: 200;

  .decoration {
    width: calc(100vw - 84px);
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/f7ba602b-3235-4329-b657-dbe4aa2d37e5.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 100% -200px;
  }

  .tab-item {
    margin-right: 46px;
  }

  .tab-item-inner {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    padding: 0px 12px;

    .tab-item-text {
      font-weight: normal;
    }

    .tab-item-text.active {
      font-weight: bold;
    }

    .tab-item-slider {
      width: 32px;
      height: 6px;
      border-radius: 3px;
      background-color: v-bind(textColor);
    }

    .bg-bar {
      background-color: #ffffff;
    }

    .theme-bg-red {
      background-color: #ff2436;
    }

    .theme-text-title {
      color: v-bind(textColor);
      font-size: 36px;
      line-height: 50px;
    }

    .theme-text-content {
      font-size: 28px;
      color: v-bind(textColor);
    }
  }
}

.tabs-bg-image {
  background-image: url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5ffe3cef-f4f7-46c2-96ed-8e393166c439.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
}
</style>
